import React, {
  useEffect, useMemo, useRef, useState,
} from 'react'
import {
  Button, Form, Input, message, Modal, Popconfirm, Radio, Select, TreeSelect, Tag,
} from 'antd'
import { connect, history } from '@umijs/max'
import list2tree from 'list2tree'
import {
  BreadcrumbBar, HufuTreeTitle, InputSearch, ProTable, ProTableOperate, ProTableOptions, ProTree, searchTreeListByName, OSSyncComponentModal,
} from '@/components'
import { getHashParameterByName } from '@/utils/helper'
import { getProjectId } from '@/utils/https'
import Tools from '@/utils/Tools'
import styles from './index.less'

const { OperateItem } = ProTableOperate
const { Option } = Select
const { Item } = Form

const getNavTreeDataFunc = list2tree({
  idKey: 'id',
  parentIdKey: 'pid',
  newKey: {
    key: 'id', value: 'id', title: 'dirName',
  },
})

const menus = [{ name: 'API管理' }, { name: '我的API' }]

// 获取该id下所有的子id
const getAllChildrenId = (dataRef) => {
  const tempArr = [dataRef.id]
  if (dataRef.children) {
    dataRef.children.map((item) => {
      // eslint-disable-next-line prefer-spread
      tempArr.push.apply(tempArr, getAllChildrenId(item))
    })
  }
  return tempArr
}

const MyApi = (props) => {
  const propsDispatch = props.dispatch
  const [treeData, setTreeData] = useState([])
  const [treeDataNew, setTreeDataNew] = useState([])
  const [tagData, setTagData] = useState([])
  const [tagDataNew, setTagDataNew] = useState([])
  const [selectedKeys, setSelectedKeys] = useState([])
  const [query, setQuery] = useState({})
  const [selectTypeValue, setSelectTypeValue] = useState('groupId')
  const [inpValue, setInpValue] = useState('')
  const [forceUpdate, setForceUpdate] = useState(0)
  const [modalApiVisible, setModalApiVisible] = useState(false)
  const [apiTagVisible, setApiTagVisible] = useState(false)
  const [apiTagId, setApiTagId] = useState(null)
  const [apiTagData, setApiTagData] = useState(null)
  const [newAddList, setNewAddList] = useState([])
  const [newDeleteList, setNewDeleteList] = useState([])
  const [tagSelectValue, setTagSelectValue] = useState(null)

  const [loading, setLoading] = useState(false)
  const [modifyId, setModifyId] = useState(null)
  const [isShowFiles, setIsShowFiles] = useState(null)
  const [isShowFilesType, setIsShowFilesType] = useState('目录')

  const [apiType, setApiType] = useState(0)
  const [apiStatus, setApiStatus] = useState(null)
  const [selectedCurrentKey, setSelectedCurrentKey] = useState('0')
  const [osSyncVisible, setOsSyncVisible] = useState(false)
  const [osSynclabel, setOsSynclabel] = useState('')
  const [osSyncjobid, setOsSyncjobid] = useState('')
  const tableRef = useRef()
  const fileForm = useRef()
  const memoTagData = useMemo(() => {
    const filterTagData = tagData.map((item) => {
      item.disabled = !(!apiTagData?.find(x => x.id === item.id) && !newAddList.find(x => x.id === item.id))
      return item
    })
    return getNavTreeDataFunc(filterTagData || [])
  }, [tagData, apiTagData, newAddList])
  let tree

  useEffect(() => {
    getTreeThemes()
    if (getHashParameterByName('create') === 'true') {
      setModalApiVisible(true)
    }
  }, [])

  useEffect(() => {
    fetchData()
  }, [apiStatus])

  useEffect(() => {
    if (inpValue === '') {
      fetchData()
    }
  }, [inpValue])

  const onOSSync = (record) => {
    setOsSyncVisible(true)
    setOsSynclabel(record.apiName)
    setOsSyncjobid(record.id)
  }

  // 获取左侧列表方法
  const getTreeThemes = (type = '') => {
    // 标记每个节点是第几层children
    // const signLayerNum = (item, num = 0) => {
    //   item.layerNum = num
    //   if (num >= 5) {
    //     item.icon = true
    //   }
    //   item?.children?.map((child) => {
    //     const tempNum = num + 1
    //     signLayerNum(child, tempNum)
    //     return null
    //   })
    // }
    (!type || type === '目录') && propsDispatch({
      type: 'myApi/queryGetApiGroup',
      cb: (data) => {
        const arr = getNavTreeDataFunc(data) || []
        // 给tree的数据标上第几层children
        setTreeData(data || [])
        setTreeDataNew(arr)
      },
    });
    (!type || type === '标签') && propsDispatch({
      type: 'myApi/queryGetApiTagGroup',
      cb: (data) => {
        const arr = getNavTreeDataFunc(data) || []
        setTagData(data || [])
        setTagDataNew(arr)
      },
    })
  }

  const columns = [{
    title: 'API名称',
    dataIndex: 'apiName',
    key: 'apiName',
    width: '15%', // ellipsis: true,
    render: (apiName) => (apiName || '-'),
  }, {
    title: 'API描述', dataIndex: 'apiDesc', key: 'apiDesc', ellipsis: true, render: (apiDesc) => (apiDesc || '-'),
  }, {
    title: 'API类型',
    dataIndex: 'apiType',
    key: 'apiType', // ellipsis: true,
    render: (txt) => (<>
      {(txt === 0 || txt === 1) && '生成API'}
      {txt === 2 && '注册API'}
      {txt === 3 && '指标API'}
    </>),
  }, {
    title: '状态',
    dataIndex: 'apiStatus',
    key: 'apiStatus', // ellipsis: true,
    render: (resApiStatus) => (<>
      {resApiStatus === 1 && (<><i className="iconfont icon-chenggong hu-green" /> 已发布</>)}
      {resApiStatus === 0 && (<><i className="iconfont icon-shibai1 hu-red" /> 未发布</>)}
    </>),
  }, {
    title: '创建人', dataIndex: 'username', key: 'username', width: '8%', // ellipsis: true,
  }, {
    title: '发布时间', // dataIndex: 'publishTime',
    key: 'publishTime',
    width: '16%', // ellipsis: true,
    render: ({ publishTime, apiStatus: resApiStatus }) => (resApiStatus === 0 ? '-' : (publishTime || '-')),
  }, {
    title: '标签管理',
    key: '__tag__',
    render: (record) => {
      const { id } = record
      return (<ProTableOptions>
        <span onClick={() => {
          setApiTagVisible(true)
          setNewAddList([])
          setNewDeleteList([])
          setTagSelectValue(null)
          propsDispatch({
            type: 'myApi/queryGetTheApiTagDetail',
            params: { apiId: id },
            cb: (data) => {
              setApiTagId(id)
              setApiTagData(data.data)
            },
          })
        }}
        >
          标签管理
        </span>
      </ProTableOptions>)
    },
  }, {
    title: '操作',
    key: 'operate',
    render: (record) => {
      const {
        id, apiStatus: apiStatusRe, apiType: apiTypeRe,
      } = record
      return (<ProTableOptions>
        <span onClick={() => {
          (apiTypeRe === 0 || apiTypeRe === 1) && history.push(`/data-service/api-manage/produce-api-detail?id=${id}&type=my`)
          apiTypeRe === 2 && history.push({ pathname: `/data-service/api-manage/register-api-detail?id=${id}&type=my` })
          apiTypeRe === 3 && history.push({ pathname: `/data-service/api-manage/index-api-detail?id=${id}&type=my` })
        }}
        >查看
        </span>
        {(apiStatusRe !== 1 || null) && (<span onClick={() => {
          (apiTypeRe === 0 || apiTypeRe === 1) && history.push({ pathname: `/data-service/api-manage/produce-api-create?id=${id}` })
          apiTypeRe === 2 && history.push({ pathname: `/data-service/api-manage/register-api-create?id=${id}` })
          apiTypeRe === 3 && history.push({ pathname: `/data-service/api-manage/index-api-create?id=${id}` })
        }}
        >编辑
        </span>)}
        {(apiStatusRe === 0 || null) && <span onClick={() => { publishApi(id) }}>发布</span>}
        {(apiStatusRe === 1 || null) && <span onClick={() => { unPublishApi(id) }}>取消发布</span>}
        {(apiStatusRe !== 1 || null) && (<Popconfirm
          title="你确定要删除吗？"
          okText="确定"
          cancelText="取消"
          onConfirm={() => handleDeleteApi(id)}
        >
          <span key="delete">
            删除
          </span>
        </Popconfirm>)}
        <span onClick={() => { onExport([id]) }}>导出</span>
        {(process.env.APP_ENV === 'os' && record.publishOs === 1) ? (<span onClick={() => { onOSSync(record) }}> 同步 </span>) : null}
      </ProTableOptions>)
    },
  }]

  // 删除
  const handleDeleteApi = (id) => {
    setLoading(true)
    propsDispatch({
      type: 'myApi/queryRemoveDataApiById',
      params: {
        id,
      },
      cb: (res) => {
        setLoading(false)
        const { msg, status } = res
        if (status === 200) {
          forceUpdateFn()
          message.success('操作成功')
        } else {
          message.error(msg || '服务端错误')
        }
      },
    })
  }

  // 取消发布
  const unPublishApi = (id) => {
    setLoading(true)
    propsDispatch({
      type: 'myApi/queryUnPublishApiById',
      params: {
        id,
      },
      cb: (res) => {
        setLoading(false)
        const { msg, status } = res
        if (status === 200) {
          forceUpdateFn()
          message.success('操作成功')
        } else {
          message.error(msg || '服务端错误')
        }
      },
    })
  }

  const publishApi = (id) => {
    setLoading(true)
    propsDispatch({
      type: 'myApi/queryPublishApiById',
      params: {
        id,
      },
      cb: (res) => {
        setLoading(false)
        const { msg, status } = res
        if (status === 200) {
          forceUpdateFn()
          message.success('操作成功')
        } else {
          message.error(msg || '服务端错误')
        }
      },
    })
  }

  const onSelectByType = (type) => (selectedKeysParams, node) => {
    setSelectTypeValue(type)
    node?.node?.id === 0 ? setSelectedKeys([0]) : setSelectedKeys(getAllChildrenId(node.node))
    // 重置表格选中的数据
    tableRef?.current?.resetSelectedRowKeys()
    tableRef?.current?.resetPageNum()
    const __query = { ...query }
    delete __query.groupId
    delete __query.tagId
    if (type === 'groupId') {
      const keys = getAllChildrenId(node.node)
      setQuery({
        ...__query, groupId: node?.node?.id === 0 ? '' : keys.join(','),
      })
    } else {
      setQuery({
        ...__query, tagId: node?.node?.id,
      })
    }
    setSelectedCurrentKey(selectedKeysParams?.[0] || '0')
  }

  const fetchData = () => {
    const tempQuery = {}
    tempQuery.apiName = inpValue
    tempQuery.apiStatus = apiStatus || ''
    const __query = { ...query, ...tempQuery }
    delete __query.groupId
    delete __query.tagId
    if (selectTypeValue === 'groupId') {
      setQuery({
        ...__query, groupId: selectedKeys[0] === 0 ? '' : selectedKeys.join(','),
      })
    } else {
      setQuery({
        ...__query, tagId: selectedKeys[0] === 0 ? '' : selectedKeys[selectedKeys.length - 1],
      })
    }
  }

  const forceUpdateFn = () => {
    setForceUpdate(forceUpdate + 1)
    getTreeThemes()
  }

  // 批量导出
  const onExport = (idArr) => {
    const selectedRowKeys = idArr?.length ? idArr : tableRef?.current?.state.selectedRowKeys
    if (selectedRowKeys.length < 1) {
      message.warning('请至少选择一条数据')
      return null
    }
    let idsStr = ''
    selectedRowKeys.map((item) => {
      if (idsStr !== '') idsStr += ','
      idsStr += item
      return null
    })
    // window.location.href = `/api/v1/myApi/exportApi?apiIds=${idsStr}&projectId=${getProjectId()}`
    Tools.downloadFile(`${window.suanpan}/api/v1/myApi/exportApi?apiIds=${idsStr}&projectId=${getProjectId()}`)
    return null
  }

  const rowSelection = {
    type: 'checkbox',
  }

  const toggleApiType = () => {
    setApiType(0)
    setModalApiVisible(!modalApiVisible)
  }

  const goToCreateApi = () => {
    if (apiType === 0) {
      history.push(`/data-service/api-manage/produce-api-create?dirKey=${selectedCurrentKey}`)
    }
    if (apiType === 1) {
      history.push(`/data-service/api-manage/register-api-create?dirKey=${selectedCurrentKey}`)
    }
    if (apiType === 2) {
      history.push(`/data-service/api-manage/index-api-create?dirKey=${selectedCurrentKey}`)
    }
  }

  const defaultIconFun = (dataParams) => {
    if (selectedKeys && selectedKeys[0] === dataParams?.data?.key) {
      return props?.expanded ? <i className="iconfont-colour2 icon-wenjianjia-dakaihover" />
        : <i className="iconfont-colour2 icon-wenjianjia-morenhover" />
    }
    return props?.expanded ? <i className="iconfont-colour2 icon-wenjianjia-dakai" />
      : <i className="iconfont-colour2 icon-wenjianjia-moren" />
  }

  const showAddModal = (id, type) => {
    // this.fileForm.current?.resetFields()
    // this.setState({
    //   isShowFiles: true,
    //   modifyId: null,
    // }, () => {
    //   this.fileForm.current.setFieldsValue({
    //     pid: id,
    //   })
    // })
    fileForm?.current?.resetFields()
    setIsShowFilesType(type)
    setIsShowFiles(true)
    setModifyId(null)
    setTimeout(() => {
      fileForm?.current?.setFieldsValue({
        pid: id,
      })
    }, 100)
  }

  // 打开新建-弹窗
  const showFilesModal = (type) => {
    fileForm.current?.resetFields()
    setIsShowFiles(true)
    setIsShowFilesType(type)
    setModifyId(null)
  }

  const onEditClick = (item, type) => {
    setIsShowFiles(true)
    setIsShowFilesType(type)
    setModifyId(item?.id)
    if (type === '标签') {
      setTimeout(() => {
        fileForm.current.setFieldsValue({
          pid: item?.pid === 0 ? null : item?.pid, dirName: item?.title || item?.dirName,
        })
      }, 100)
    } else {
      setTimeout(() => {
        fileForm.current.setFieldsValue({
          pid: item?.pid, dirName: item?.title || item?.dirName,
        })
      }, 100)
    }
  }

  // 删除 目录 / 标签目录
  const deleteTheme = (data, type) => {
    if (type === '目录') {
      propsDispatch({
        type: 'myApi/queryRemoveDataApiGroupById',
        params: {
          id: data.id,
        },
        cb: (res) => {
          res && message.success('删除成功')
          getTreeThemes(type)
        },
      })
    } else {
      propsDispatch({
        type: 'myApi/queryRemoveTagApiGroupById',
        params: {
          id: data.id,
        },
        cb: (res) => {
          res && message.success('删除成功')
          getTreeThemes(type)
        },
      })
    }
  }

  const renderTreeNodes = (data, type) => {
    const tempArr = []
    data.map((item) => {
      const {
        title, children, layerNum, ...restProps
      } = item
      const tempObj = {
        icon: defaultIconFun, ...restProps,
      }
      tempObj.title = (<HufuTreeTitle
        title={title}
        key={item.id}
        icon
        operations={item.id === '0' ? [<a
          key={`new${item.id}`}
          onClick={() => showAddModal(item.id, type)}
        >
          新建{type}
        </a>] : [<a
          key={`new${item.id}`}
          onClick={() => showAddModal(item.id, type)}
        >
          新建{type}
        </a>, <a
          key={`edit${item.id}`}
          onClick={() => onEditClick(item, type)}
        >
          编辑{type}
        </a>, <Popconfirm
          title={`你确定要删除这个${type}吗？`}
          okText="确定"
          cancelText="取消"
          onConfirm={() => deleteTheme(item, type)}
          key={`delPop${item.id}`}
        >
          <a
            key={`del${item.id}`}
          >
            删除
          </a>
        </Popconfirm>]}
      />)
      if (item.children) {
        tempObj.children = renderTreeNodes(item.children, type)
      }
      tempArr.push(tempObj)
      return null
    })
    return tempArr
  }

  const upsetDir = (type) => {
    if (type === '目录') {
      fileForm.current.validateFields().then(values => {
        propsDispatch({
          type: 'myApi/querySaveDataApiGroup',
          params: {
            ...values, id: modifyId,
          },
          cb: (res) => {
            const { status, msg } = res
            if (status === 200) {
              message.success('操作成功')
              setIsShowFiles(false)
              getTreeThemes()
            } else {
              message.error(msg || '服务端错误')
            }
          },
        })
      })
    } else {
      fileForm.current.validateFields().then(values => {
        const { pid, ...valueOthers } = values
        propsDispatch({
          type: 'myApi/querySaveApiTagGroup',
          params: {
            ...valueOthers, pid: pid || 0, id: modifyId,
          },
          cb: (res) => {
            const { status, msg } = res
            if (status === 200) {
              message.success('操作成功')
              setIsShowFiles(false)
              getTreeThemes()
            } else {
              message.error(msg || '服务端错误')
            }
          },
        })
      })
    }
  }

  const upsetByApiToTag = () => {
    if (tagSelectValue) {
      message.warn('存在编辑中的标签，请处理后再保存~')
      return
    }
    propsDispatch({
      type: 'myApi/saveTheApiTagDetail',
      params: {
        apiId: apiTagId, addTagList: newAddList.map(x => x.id), deleteTagList: newDeleteList.map(x => x.id),
      },
      cb: (res) => {
        const { status, msg } = res
        if (status === 200) {
          message.success('标签更新成功')
          setApiTagVisible(false)
          setNewAddList([])
          setNewDeleteList([])
          setTagSelectValue(null)
          getTreeThemes()
        } else {
          message.error(msg || '服务端错误')
        }
      },
    })
  }

  return (<div className={styles.standard_define}>
    <BreadcrumbBar menu={menus} />
    <div className={styles.page_content}>
      <div className={styles.page_content_left}>
        <ProTree
          showLine
          showSearch
          height="50%"
          showTitle
          operations={[<i
            key="1"
            className="iconfont icon-xinjianwenjianjia"
            title="新建目录"
            onClick={() => showFilesModal('目录')}
          />]}
          treeData={treeDataNew || []}
          renderTreeNodes={(data) => renderTreeNodes(data, '目录')}
          selectedKeys={selectedKeys}
          onSelect={onSelectByType('groupId')}
          ref={(dev) => (tree = dev)}
          search={(name) => {
            const searchTree = searchTreeListByName(name, treeData, 'dirName')
            const treeDataNews = getNavTreeDataFunc(searchTree.result)
            setTreeDataNew(treeDataNews)
            tree.onExpand(searchTree.fatchIds)
          }}
        />
        <ProTree
          showLine
          showSearch
          height="50%"
          showTitle
          title="标签目录"
          operations={[<i
            key="1"
            className="iconfont icon-xinjianwenjianjia"
            title="新建标签"
            onClick={() => showFilesModal('标签')}
          />]}
          treeData={tagDataNew || []}
          renderTreeNodes={(data) => renderTreeNodes(data, '标签')}
          selectedKeys={selectedKeys}
          onSelect={onSelectByType('tagId')}
          ref={(dev) => (tree = dev)}
          search={(name) => {
            const searchTree = searchTreeListByName(name, tagData, 'dirName')
            const tagDataNewData = getNavTreeDataFunc(searchTree.result)
            setTagDataNew(tagDataNewData)
            tree.onExpand(searchTree.fatchIds)
          }}
        />
      </div>
      <div className={styles.page_content_right}>
        <ProTableOperate>
          <OperateItem>
            <span>任务状态</span>
            <Select
              allowClear
              value={apiStatus}
              onChange={(value) => {
                setApiStatus(value || '')
              }}
            >
              {/* <Option key={-1} value={-1}>全部</Option> */}
              <Option key={1}>已发布</Option>
              <Option key={0}>未发布</Option>
            </Select>
          </OperateItem>
          <OperateItem align="left">
            <InputSearch
              placeholder="请输入API名称进行搜索"
              value={inpValue}
              onChange={(e) => {
                setInpValue(e.target.value || '')
              }}
              onSearch={fetchData}
            />
          </OperateItem>
          <OperateItem itemType="btn">
            <Button type="primary" onClick={toggleApiType}>新建API</Button>
          </OperateItem>
        </ProTableOperate>
        <ProTable
          ref={tableRef}
          loading={loading}
          key={forceUpdate}
          method={selectTypeValue === 'groupId' ? 'get' : 'post'}
          url={selectTypeValue === 'groupId' ? '/api/v1/myApi/getMyApiList' : '/api/v1/myApi/getMyApiListByTag'}
          query={query}
          rowKey="id"
          columns={columns}
          rowSelection={rowSelection}
          bulkOperation={[{
            title: '批量导出', // loading: optTypeParams === 0 ? loading : false,
            onClick: onExport,
          }]}
        />
      </div>
    </div>
    <Modal
      title="标签管理"
      visible={apiTagVisible}
      cancelText="取消"
      okText="保存"
      onOk={upsetByApiToTag}
      onCancel={() => {
        setApiTagId(null)
        setApiTagVisible(false)
      }}
      maskClosable={false}
    >
      <div>
        <Button type="link" onClick={() => showFilesModal('标签')}>
          新增标签
        </Button>
      </div>
      <div className="api-tag-data-list-box">
        <div className="api-tag-data-list">
          {[...(apiTagData || []), ...newAddList].map((apiTagItem) => <Tag
            key={apiTagItem.id}
            closable
            style={{ float: 'left' }}
            onClose={() => {
              if (apiTagItem.type && apiTagItem.type === 'new') {
                setNewAddList([...newAddList.filter(x => x.id !== apiTagItem.id)])
              } else {
                setNewDeleteList([...newDeleteList, apiTagItem])
                setApiTagData([...apiTagData.filter(x => x.id !== apiTagItem.id)])
              }
            }}
          >
            {apiTagItem?.dirName || apiTagItem?.title}
          </Tag>)}
          <div style={{
            display: 'inline-block',
            width: '200px',
            float: 'left',
          }}
          >
            <div style={{
              display: 'flex',
              flexDirection: 'row',
              height: '100%',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
            >
              <TreeSelect
                allowClear
                showSearch
                size="small"
                style={{ width: '160px' }}
                value={tagSelectValue}
                treeData={memoTagData}
                onChange={(newValue) => setTagSelectValue(newValue)}
                placeholder="请选择标签"
                treeDefaultExpandAll
                filterTreeNode={(input, treeNode) => (treeNode.name || treeNode.dirName).toLowerCase().indexOf(input.toLowerCase()) >= 0}
                fieldNames={{
                  label: 'dirName', value: 'id', children: 'children',
                }}
              />
              <Button
                size="small"
                type="primary"
                style={{ marginLeft: '8px' }}
                disabled={!tagSelectValue}
                onClick={() => {
                  const theData = tagData.find(x => x.id === tagSelectValue)
                  setNewAddList([...newAddList, { ...theData, type: 'new' }])
                  setTagSelectValue(null)
                }}
              >添加</Button>
            </div>
          </div>
        </div>
      </div>
    </Modal>
    <Modal
      title="新建API"
      visible={modalApiVisible}
      destroyOnClose
      className="my-api-type-box"
      onCancel={toggleApiType}
      maskClosable={false}
      okText="确定"
      footer={[<Button key={1} onClick={toggleApiType}>取消</Button>,
      // eslint-disable-next-line react/jsx-indent
      <Button key={2} onClick={goToCreateApi} type="primary">确定</Button>]}
    >
      <Radio.Group
        size="large"
        className="center-block"
        defaultValue={apiType}
        onChange={(e) => { setApiType(e.target.value) }}
      >
        <Radio.Button value={0} key={0}>
          <i className={`iconfont icon-${apiType === 0 ? 'chenggong' : 'weixuan'}`} />
          <p className="title">生成API</p>
          <p className="txt">快速将关系型数据库和NoSQL数据库的表生成数据API</p>
        </Radio.Button>
        <Radio.Button value={1} key={1}>
          <i className={`iconfont icon-${apiType === 1 ? 'chenggong' : 'weixuan'}`} />
          <p className="title">注册API</p>
          <p className="txt">将已有的API注册至数据服务，进行统一管理、发布和对接</p>
        </Radio.Button>
        <Radio.Button value={2} key={2}>
          <i className={`iconfont icon-${apiType === 2 ? 'chenggong' : 'weixuan'}`} />
          <p className="title">指标API</p>
          <p className="txt">将已开发的指标注册至数据服务，帮助指标对外服务</p>
        </Radio.Button>
      </Radio.Group>
    </Modal>
    <Modal
      title={(modifyId ? '修改' : '新建') + isShowFilesType}
      visible={isShowFiles}
      cancelText="取消"
      okText="保存"
      onOk={() => upsetDir(isShowFilesType)}
      onCancel={() => {
        setModifyId(null)
        setIsShowFiles(false)
      }}
      maskClosable={false}
    >
      <div>
        <Form
          ref={fileForm}
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 19 }}
          autoComplete="off"
        >
          <Item
            label={`${isShowFilesType}名称`}
            name="dirName"
            rules={[{ required: true, message: `请输入${isShowFilesType}名称` }]}
          >
            <Input placeholder={`请输入${isShowFilesType}名称`} />
          </Item>
          <Item
            label={`父级${isShowFilesType}`}
            name="pid"
          >
            <TreeSelect
              allowClear
              showSearch
              getPopupContainer={(triggerNode) => triggerNode.parentNode}
              // dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              treeData={getNavTreeDataFunc(isShowFilesType === '目录' ? treeData : tagData || [])}
              placeholder={`请选择父级${isShowFilesType}`}
              treeDefaultExpandAll
              filterTreeNode={(input, treeNode) => (treeNode.name || treeNode.dirName).toLowerCase().indexOf(input.toLowerCase()) >= 0}
              fieldNames={{
                label: 'dirName', value: 'id', children: 'children',
              }}
            />
          </Item>
        </Form>
      </div>
    </Modal>
    <OSSyncComponentModal
      visible={osSyncVisible}
      onClose={() => setOsSyncVisible(false)}
      jobtype="3"
      jobid={osSyncjobid}
      label={osSynclabel}
    />
  </div>)
}
const MyApiConnect = ({ apiMarket }) => ({ ...apiMarket })
export default connect(MyApiConnect)(MyApi)
